<template>
    <!-- 宠物寄养页面商家卡片 -->
    <div class="board-card">
        <!-- 使用van-list实现分页加载 -->
        <van-list v-model="loading" :finished="finished" finished-text="我是有底线的~" @load="onLoad">
            <div class="item-card" v-for="item in cardItems" :key="item.b_id" @click="goBoardDetail(item)">
                <!-- 评分 -->
                <div class="star">
                    <img src="../assets/img/jiyang/star.png" alt="">
                    <span class="score">{{ item.b_score }}</span>
                </div>
                <!-- 店铺图片 -->
                <img :src="item.b_img" alt="">
                <!-- 店铺名称 -->
                <div class="pet-home">
                    <div class="home-name">
                        <span>{{ item.b_name }}</span>
                        <img src="../assets/img/jiyang/renzheng.png" alt="">
                    </div>
                    <!-- 所在城市 -->
                    <span class="city">{{ item.b_city }}</span>
                </div>
                <div class="icon-price">
                    <span class="btn">{{ item.b_feature }}</span>
                    <span class="day-price">￥{{ item.b_price }}/天</span>
                </div>
            </div>
        </van-list>
        <div class="footer" style="width:100%;height:5.5rem"></div>
    </div>
</template>

<script>
export default {
    props: {

    },
    components: {

    },
    data() {
        return {
            cardItems: [],//存放日志列表
            loading: false,//加载状态,默认未加载
            finished: false,//完成状态,默认未完成
            page: 1,//当前页,从第一页开始
            pageSize: 3,//每页显示五条
        }
    },
    methods: {
        // 获取服务端日志列表数据
        onLoad() {
            this.$axios.get(`${this.$api.getAll}/${this.page}/${this.pageSize}`)
                .then(res => res.data)
                .then(res => {
                    if (res.code == 201) {
                        this.finished = true
                        // console.log(res.data);
                        // this.$toast.fail("无信息")
                    }
                    this.cardItems.push(...res.data)
                    this.page++
                    this.loading = false
                    // console.log(this.cardItems);
                })
        },
        goBoardDetail(item) {
            // console.log(item.b_id);
            this.$router.push({
                path: "/boarddetail",
                query: {
                    b_id: item.b_id
                }
            });
        }
    },
    
}
</script>

<style lang="scss" scoped>
.board-card {
    background-color: #f2f2f2;
    overflow: hidden;

    .item-card {
        box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, .2), 0 0.6rem 2rem 0 rgba(0, 0, 0, .19);
        background-color: #fff;
        width: 90%;
        height: 30rem;
        margin: 2rem auto;
        border-radius: 0.5rem;
        position: relative;

        .star {
            position: absolute;
            left: 2rem;
            top: 1.5rem;
            display: flex;
            width: 6rem;
            height: 2.5rem;
            background-color: #fff;
            border-radius: 0.5rem;
            justify-content: center;
            align-items: center;

            img {
                width: 1.6rem;
                display: block;
            }

            span {
                padding-top: 0.3rem;
                padding-left: 0.5rem;
                font-size: 1.4rem;
                font-weight: bold;
                display: block;
                color: #36343c;
                font-family: "华光彩云_cnki";
                text-shadow: 0 0 0.1rem #36343c;
            }
        }

        img {
            width: 100%;
            height: 60%;
            object-fit: cover;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }

        .pet-home {
            width: 94%;
            margin: auto;
            display: block;
            height: 6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .home-name {
                width: 25rem;
                display: flex;
                align-items: center;

                span {
                    font-size: 1.6rem;
                    font-weight: bold;
                    display: block;
                }

                img {
                    display: block;
                    width: 1.6rem;
                    height: 1.6rem;
                }
            }

            .city {
                display: block;
                color: #b6b4c0;
            }
        }

        .icon-price {
            margin: 1rem auto;
            width: 94%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                display: block;
                font-size: 1.2rem;
            }

            .btn {
                border-radius: 0.6rem;
                background-color: #efedfd;
                color: #8d73ec;
                padding: 0.5rem;
            }
        }
    }
}
</style>
